<template>
	<view class="trade-buy">
		<view class="trade-buy-list">
                <view class="tbl tbl-item van-hairline--top-bottom"
                	v-for="(key, index) in buys" :key="index"
					@click="goDetails(key)">
                	<view class="tbl-item-info">
                		<view class="tbl-item-info-id">
                			<view class="tbl-item-info-icon iconfont icon-zengjia"
							 :class="{'icon-jianshao': key.type > 2}">
                			</view>
                		</view>
                		<view class="tbl-item-info-sum">
                			<text>{{key.sendToken}}</text>
							<text class="time">{{key.time}}</text>
                		</view>
                	</view>
                	<view class="tbl-item-info-sum">
                		<text class="type" :class="{'type2': key.type > 2}"> {{key.type > 2 ? '-' : '+'}}{{key.sum}}</text> 
                	</view>
                </view>
		</view>
	</view>
</template>
<script>
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				buys: []
			}
		},
		onShow () {
			this.gitList()
		},
		onReachBottom () {
			this.gitList()
		},
		methods: {
			...mapActions([
				'setTRDetails'
			]),
			goDetails (key) {
				this.setTRDetails(key)
				uni.navigateTo({
					url: '/pages/home/trading-record/details?type=2' 
				});
			},
			gitList () {
				for(let i = 0; i < 10; i++) {
					let sum = Math.random()*5
					const ob = {
						time: '2019-02-10 15:20',
						sendToken: 'eeeesdcsdcsdcsdc2321323232',
						receiveToken: 'wewcdscsdcsdcsdcsdc2321323232',
						type: sum,
						sum: '200',
						remark: ''
					}
					this.buys.push(ob)
				}
			}
		},
		components: {
		}
	}
</script>
<style scoped lang="scss">
@import '../../../common/integral-trade.scss';
.tbl-item-info-sum {
	font-size: 32upx;
	.type {
		color: #00ff1e
	}
	.type2 {
		color: #ff3c00
	}
	.time {
		line-height:1.2;
		font-size: 20upx;
		color:#9b9b9b;

	}
}
.trade-buy-list {
	.tbl-item-info{
		&-id {
			margin: auto;
			text-align: center;
			min-width: 120upx;
		}
		&-sum {
			max-width: 450upx;
		}
	} 
	.icon-zengjia {
		color: #00ff1e;
	}
	.icon-jianshao {
		color: #ff3c00
	}
} 
</style>
